let data = [
    { grade: "A", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: true, idKick: " " },
    { grade: "A", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: false, idKick: " " },
    { grade: "C", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: false, idKick: " " },
    { grade: "F", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: true, idKick: " " },
    { grade: "D", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: false, idKick: " " },
    { grade: "E", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: false, idKick: " " },
    { grade: "E", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: true, idKick: " " },
    { grade: "A", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: false, idKick: " " },
    { grade: "C", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: true, idKick: " " },
    { grade: "B", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: true, idKick: " " },
    { grade: "D", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: true, idKick: " " },
    { grade: "F", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: false, idKick: " " },
    { grade: "A", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: true, idKick: " " },
    { grade: "A", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: false, idKick: " " },
    { grade: "C", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: false, idKick: " " },
    { grade: "F", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: true, idKick: " " },
    { grade: "D", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: false, idKick: " " },
    { grade: "E", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: false, idKick: " " },
    { grade: "E", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: true, idKick: " " },
    { grade: "A", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: false, idKick: " " },
    { grade: "C", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: true, idKick: " " },
    { grade: "B", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: true, idKick: " " },
    { grade: "D", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: true, idKick: " " },
    { grade: "F", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: false, idKick: " " },
    { grade: "A", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: true, idKick: " " },
    { grade: "A", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: false, idKick: " " },
    { grade: "C", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: false, idKick: " " },
    { grade: "F", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: true, idKick: " " },
    { grade: "D", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: false, idKick: " " },
    { grade: "E", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: false, idKick: " " },
    { grade: "E", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: true, idKick: " " },
    { grade: "A", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: false, idKick: " " },
    { grade: "C", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: true, idKick: " " },
    { grade: "B", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: true, idKick: " " },
    { grade: "D", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: true, idKick: " " },
    { grade: "F", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: false, idKick: " " },
    { grade: "A", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: true, idKick: " " },
    { grade: "A", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: false, idKick: " " },
    { grade: "C", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: false, idKick: " " },
    { grade: "F", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: true, idKick: " " },
    { grade: "D", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: false, idKick: " " },
    { grade: "E", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: false, idKick: " " },
    { grade: "E", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: true, idKick: " " },
    { grade: "A", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: false, idKick: " " },
    { grade: "C", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: true, idKick: " " },
    { grade: "B", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: true, idKick: " " },
    { grade: "D", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: true, idKick: " " },
    { grade: "F", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: false, idKick: " " },
    { grade: "A", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: true, idKick: " " },
    { grade: "A", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: false, idKick: " " },
    { grade: "C", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: false, idKick: " " },
    { grade: "F", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: true, idKick: " " },
    { grade: "D", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: false, idKick: " " },
    { grade: "E", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: false, idKick: " " },
    { grade: "E", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: true, idKick: " " },
    { grade: "A", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: false, idKick: " " },
    { grade: "C", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: true, idKick: " " },
    { grade: "B", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: true, idKick: " " },
    { grade: "D", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: true, idKick: " " },
    { grade: "F", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: false, idKick: " " },
    { grade: "A", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: true, idKick: " " },
    { grade: "A", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: false, idKick: " " },
    { grade: "C", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: false, idKick: " " },
    { grade: "F", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: true, idKick: " " },
    { grade: "D", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: false, idKick: " " },
    { grade: "E", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: false, idKick: " " },
    { grade: "E", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: true, idKick: " " },
    { grade: "A", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: false, idKick: " " },
    { grade: "C", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: true, idKick: " " },
    { grade: "B", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: true, idKick: " " },
    { grade: "D", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: true, idKick: " " },
    { grade: "F", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: false, idKick: " " },
    { grade: "A", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: true, idKick: " " },
    { grade: "A", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: false, idKick: " " },
    { grade: "C", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: false, idKick: " " },
    { grade: "F", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: true, idKick: " " },
    { grade: "D", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: false, idKick: " " },
    { grade: "E", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: false, idKick: " " },
    { grade: "E", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: true, idKick: " " },
    { grade: "A", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: false, idKick: " " },
    { grade: "C", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: true, idKick: " " },
    { grade: "B", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: true, idKick: " " },
    { grade: "D", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: true, idKick: " " },
    { grade: "F", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: false, idKick: " " },
    { grade: "A", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: true, idKick: " " },
    { grade: "A", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: false, idKick: " " },
    { grade: "C", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: false, idKick: " " },
    { grade: "F", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: true, idKick: " " },
    { grade: "D", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: false, idKick: " " },
    { grade: "E", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: false, idKick: " " },
    { grade: "E", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: true, idKick: " " },
    { grade: "A", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: false, idKick: " " },
    { grade: "C", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: true, idKick: " " },
    { grade: "B", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: true, idKick: " " },
    { grade: "D", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: true, idKick: " " },
    { grade: "F", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: false, idKick: " " },
    { grade: "A", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: true, idKick: " " },
    { grade: "A", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: false, idKick: " " },
    { grade: "C", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: false, idKick: " " },
    { grade: "F", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: true, idKick: " " },
    { grade: "D", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: false, idKick: " " },
    { grade: "E", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: false, idKick: " " },
    { grade: "E", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: true, idKick: " " },
    { grade: "A", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: false, idKick: " " },
    { grade: "C", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: true, idKick: " " },
    { grade: "B", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: true, idKick: " " },
    { grade: "D", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: true, idKick: " " },
    { grade: "F", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: false, idKick: " " },
    { grade: "A", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: true, idKick: " " },
    { grade: "A", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: false, idKick: " " },
    { grade: "C", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: false, idKick: " " },
    { grade: "F", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: true, idKick: " " },
    { grade: "D", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: false, idKick: " " },
    { grade: "E", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: false, idKick: " " },
    { grade: "E", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: true, idKick: " " },
    { grade: "A", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: false, idKick: " " },
    { grade: "C", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: true, idKick: " " },
    { grade: "B", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: true, idKick: " " },
    { grade: "D", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: true, idKick: " " },
    { grade: "F", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: false, idKick: " " },
    { grade: "A", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: true, idKick: " " },
    { grade: "A", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: false, idKick: " " },
    { grade: "C", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: false, idKick: " " },
    { grade: "F", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: true, idKick: " " },
    { grade: "D", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: false, idKick: " " },
    { grade: "E", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: false, idKick: " " },
    { grade: "E", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: true, idKick: " " },
    { grade: "A", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: false, idKick: " " },
    { grade: "C", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: true, idKick: " " },
    { grade: "B", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: true, idKick: " " },
    { grade: "D", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: true, idKick: " " },
    { grade: "F", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: false, idKick: " " },
    { grade: "A", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: true, idKick: " " },
    { grade: "A", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: false, idKick: " " },
    { grade: "C", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: false, idKick: " " },
    { grade: "F", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: true, idKick: " " },
    { grade: "D", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: false, idKick: " " },
    { grade: "E", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: false, idKick: " " },
    { grade: "E", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: true, idKick: " " },
    { grade: "A", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: false, idKick: " " },
    { grade: "C", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: true, idKick: " " },
    { grade: "B", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: true, idKick: " " },
    { grade: "D", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: true, idKick: " " },
    { grade: "F", Creator: "ipei", creationTime: getTimer(), reviser: "汪德培", reviseTimer: getTimer(), state: false, idKick: " " },
];
function toDup(i) {
    return i >= 10 ? i : "0" + i;
}
function getTimer() {
    var timer = new Date();
    var y = timer.getFullYear();
    var M = timer.getMonth() + 1;
    var d = timer.getDate();
    var h = timer.getHours();
    var m = timer.getMinutes();
    return y + "-" + toDup(M) + "-" + toDup(d) + "T" + toDup(h) + ":" + toDup(m);
}
let page = 1;
let pageSelector = document.querySelector(".content-content>div>div>.divSelect");
let pageSelectorBtn = document.querySelector(".content-content>div>div>button");
let pages = pageSelector.children[0].innerText;
const strip = 8;
let dataClone = cloneArr(data);
let tbody = document.querySelector(".content-content>div>table>tbody");
let pagination = document.querySelector(".content-content>div>div>div:nth-child(2)");
let formBtn = document.querySelectorAll(".content-content>div>form>button");
let inquire = cloneArr(dataClone);
let inquireoff = false;
let kickoff = false;
let inputValue = true;
let online = false;
let idRevise = 0;
let reviseoff = false;
function cloneArr(obj) {
    return JSON.parse(JSON.stringify(obj));
}

function render(data) {
    tbody.innerHTML = "";
    pagination.innerHTML = "";
    pageSelector.children[1].innerHTML = "";
    for (let i = 0; i < data.length; i++) {
        data[i].id = i;
    }
    let sli = data.slice((page - 1) * strip, page * strip);
    for (let i = 0; i < sli.length; i++) {
        let tr = document.createElement("tr");
        tr.dataset.id = sli[i].id;
        tr.innerHTML = `
            <td><input type="checkbox" ${sli[i].idKick}></td>
            <td>${sli[i].grade}</td>
            <td>${sli[i].Creator}</td>
            <td>${sli[i].creationTime}</td>
            <td>${sli[i].reviser}</td>
            <td>${sli[i].reviseTimer}</td>
            <td>
                <div class="divState">
                    <div></div>
                </div>
            </td>
            <td>
                <button>修改</button>
                <button>删除</button>
            </td>
        `;
        tbody.appendChild(tr);
        if (sli[i].state) {
            tr.children[6].children[0].children[0].style.left = tr.children[6].children[0].offsetWidth - tr.children[6].children[0].children[0].offsetWidth - 1 + "px";
            tr.children[6].children[0].style.backgroundColor = "#1890ff";
        }
    }
    for (i = 1; i <= Math.ceil(Math.ceil(data.length / strip) / 5); i++) {
        let div = document.createElement("div");
        div.innerHTML = i;
        pageSelector.children[1].appendChild(div);
    }
    if (pages == Math.ceil(Math.ceil(data.length / strip) / 5)) {
        for (let i = (pages - 1) * 5 + 1; i <= ((pages - 1) * 5) + Math.ceil(data.length / strip) % 5; i++) {
            let div = document.createElement('div');
            div.innerHTML = i;
            if (page == i) {
                div.style.backgroundColor = "#1890ff";
            }
            pagination.appendChild(div);
        }
        if (page == ((pages - 1) * 5) + Math.ceil(data.length / strip) % 5) {
            pagination.parentNode.children[2].style.display = "none";
        } else {
            pagination.parentNode.children[2].style.display = "flex";
        }
    } else {
        for (let i = (pages - 1) * 5 + 1; i <= pages * 5; i++) {
            let div = document.createElement('div');
            div.innerHTML = i;
            if (page == i) {
                div.style.backgroundColor = "#1890ff";
            }
            pagination.appendChild(div);
        }
        if (page == pages * 5) {
            pagination.parentNode.children[2].style.display = "none";
        } else {
            pagination.parentNode.children[2].style.display = "flex";
        }
    }
    let divState = document.querySelectorAll(".divState");
    for (let i = 0; i < divState.length; i++) {
        divState[i].addEventListener("click", function (e) {
            this.children[0].style.transition = "all .3s";
            this.style.transition = "all .3s";
            if (this.children[0].offsetLeft == 1) {
                this.children[0].style.left = this.offsetWidth - this.children[0].offsetWidth - 1 + "px";
                this.style.backgroundColor = "#1890ff";
                data[this.parentNode.parentNode.dataset.id].state = true;
            } else {
                this.children[0].style.left = "1px";
                this.style.backgroundColor = "";
                data[this.parentNode.parentNode.dataset.id].state = false;
            }
        });
    }
    if (page == (pages - 1) * 5 + 1) {
        pagination.parentNode.children[0].style.display = "none";
    } else {
        pagination.parentNode.children[0].style.display = "flex";
    }
} render(dataClone);
function paginationClick(e) {
    if (e.target.innerText == "<") {
        page--;
        if (inquireoff) {
            render(inquire);
        } else {
            render(dataClone);
        }
    } else if (e.target.innerText == ">") {
        page++;
        if (inquireoff) {
            render(inquire);
        } else {
            render(dataClone);
        }
    } else if (e.target.parentNode == pagination) {
        page = e.target.innerText;
        if (inquireoff) {
            render(inquire);
        } else {
            render(dataClone);
        }
    }
}
function formBtnInquire(e) {
    page = 1;
    pages = 1;
    inquireoff = true;
    e.preventDefault();
    let formInput = document.querySelectorAll('.content-content>div>form>div>input');
    inquire = dataClone;
    if (formInput[0].value == "" || (formInput[0].value).trim() == "") {
        inquire = inquire;
    } else {
        inquire = dataClone.filter(function (d) { return d.grade.includes(formInput[0].value) || d.grade.toLocaleLowerCase().includes(formInput[0].value) });
    }
    render(inquire);
}
function formBtnReset(e) {
    let formInput = document.querySelectorAll('.content-content>div>form>div>input');
    e.preventDefault();
    tsk("确定重置吗？", function () {
        pages = 1;
        page = 1;
        formInput[0].value = "";
        inquireoff = false;
        dataClone = cloneArr(data);
        render(dataClone);
    });
}
function formBtnKick(e) {
    inquireoff = false;
    e.preventDefault();
    tsk("确定删除所选内容?", function () {
        dataClone = dataClone.filter(function (a) {
            return a.idKick == " ";
        })
        render(dataClone);
    });
}
function tBodyDel(e) {
    dataClone.splice(e.target.parentNode.parentNode.dataset.id, 1);
    render(dataClone);
}
function tBody(e) {
    if (e.target.innerText == "删除" && e.target.parentNode.parentNode.parentNode == tbody) {
        tsk("确定删除吗？", function () {
            inquireoff = false;
            tBodyDel(e);
        });
    } else if (e.target.innerText == "修改" && e.target.parentNode.parentNode.parentNode == tbody) {
        idRevise = 0;
        formBtnNew(e, formRevise);
    } else if (e.target.nodeName == "INPUT" && e.target.parentNode.parentNode.parentNode == tbody) {
        if (inquireoff) {
            if (inquire[e.target.parentNode.parentNode.dataset.id].idKick == " ") {
                inquire[e.target.parentNode.parentNode.dataset.id].idKick = "checked";
            } else if (dataClone[e.target.parentNode.parentNode.dataset.id].idKick == "checked") {
                inquire[e.target.parentNode.parentNode.dataset.id].idKick = " ";
            }
        } else {
            if (dataClone[e.target.parentNode.parentNode.dataset.id].idKick == " ") {
                dataClone[e.target.parentNode.parentNode.dataset.id].idKick = "checked";
            } else if (dataClone[e.target.parentNode.parentNode.dataset.id].idKick == "checked") {
                dataClone[e.target.parentNode.parentNode.dataset.id].idKick = " ";
            }
        }
    }
    function formRevise() {
        let tskFormInput = document.querySelectorAll(".tskForm>div>div>input[type='text']");
        let disStateTsk = document.querySelector(".tskForm>div>div:last-child>.divState");
        let tskFormDate = document.querySelector(".tskForm>div>div>input[type='datetime-local']");
        idRevise = e.target.parentNode.parentNode.dataset.id;
        tskFormInput[0].value = dataClone[e.target.parentNode.parentNode.dataset.id].grade;
        tskFormInput[1].value = dataClone[e.target.parentNode.parentNode.dataset.id].Creator;
        tskFormDate.value = dataClone[e.target.parentNode.parentNode.dataset.id].creationTime;
        if (dataClone[e.target.parentNode.parentNode.dataset.id].state) {
            disStateTsk.children[0].style.left = disStateTsk.offsetWidth - disStateTsk.children[0].offsetWidth - 1 + "px";
            disStateTsk.style.backgroundColor = "#1890ff";
            online = true;
        } else {
            disStateTsk.children[0].style.left = "1px";
            disStateTsk.style.backgroundColor = "";
            online = false;
        }
    }
}
function formNew() {
    tsk(`<div class="tskForm">
            <div>
            <span>档案等级：</span>
                <div>
                    <input type="text" placeholder="请输入a-f(大小写不限)"/>
                </div>
            </div>
            <div>
            <span>创建人：</span>
                <div>
                    <input type="text" placeholder="请输入" />
                </div>
            </div>
            <div>
            <span>创建时间：</span>
                <div>
                    <input type="datetime-local" placeholder="请选择日期" />
                </div>
            </div>
            <div>
            <span>状态：</span><div><div class="divState"><div></div></div></div>
            </div>
        </div>`, function () {
        let isnull = false;
        let tskFormInput = document.querySelectorAll(".tskForm>div>div>input[type='text']");
        let tskFormDate = document.querySelector(".tskForm>div>div>input[type='datetime-local']");
        for (let i = 0; i < tskFormInput.length; i++) {
            if (tskFormInput[i].value == "" || tskFormDate.value == "") {
                isnull = true;
            }
        }
        if (isnull) {
            tsk("不能为空");
        } else {
            if (inputValue) {
                if (reviseoff) {
                    let inp = {
                        grade: tskFormInput[0].value.toLocaleUpperCase(),
                        Creator: dataClone[idRevise].Creator,
                        creationTime: dataClone[idRevise].creationTime,
                        reviser: tskFormInput[1].value,
                        reviseTimer: tskFormDate.value,
                        state: online,
                        idKick: " "
                    };
                    dataClone.splice(idRevise, 1, inp);
                } else {
                    let inp = {
                        grade: tskFormInput[0].value.toLocaleUpperCase(),
                        Creator: tskFormInput[1].value,
                        creationTime: tskFormDate.value,
                        reviser: "\\",
                        reviseTimer: "\\",
                        state: online,
                        idKick: " "
                    };
                    dataClone.splice(0, 0, inp);
                }
                render(dataClone);
            } else {
                tsk("请正确输入");
            }
        }
    });
}
function formBtnNew(e, fun) {
    inquireoff = false;
    inputValue = true;
    online = false;
    e.preventDefault();
    if (fun) {
        reviseoff = true;
    } else {
        reviseoff = false;
    }
    formNew();
    fun && fun();
    let disStateTsk = document.querySelector(".tskForm>div>div:last-child>.divState");
    let tskFormInput = document.querySelectorAll(".tskForm>div>div>input[type='text']");
    disStateTsk.addEventListener("click", function (e) {
        this.children[0].style.transition = "all .3s";
        this.style.transition = "all .3s";
        if (this.children[0].offsetLeft == 1) {
            this.children[0].style.left = this.offsetWidth - this.children[0].offsetWidth - 1 + "px";
            this.style.backgroundColor = "#1890ff";
            online = true;
        } else {
            this.children[0].style.left = "1px";
            this.style.backgroundColor = "";
            online = false;
        }
    });
    let rule = [
        { reg: /^[a-f]$/gi },
        { reg: /^[0-9A-z\u4E00-\u9FA5]+$/g }
    ];
    for (var i = 0; i < tskFormInput.length; i++) {
        (function (p) {
            tskFormInput[i].addEventListener("input", function (e) {
                if (rule[p].reg.test(this.value)) {
                    inputValue = true;
                    tskFormInput[p].style.boxShadow = "0 0 5px #3c763d";
                } else if (rule[p].reg.test(this.value) == false) {
                    inputValue = false;
                    tskFormInput[p].style.boxShadow = "0 0 5px #ab4a48";
                }
            });
        })(i);
    }
}
document.querySelector(".content-content>div>table>thead>tr>th:first-child>div").addEventListener("click", function (e) {
    if (kickoff == true) {
        if (inquireoff) {
            inquire = inquire.filter(function (a) {
                return a.idKick = " ";
            });
        } else {
            dataClone = dataClone.filter(function (a) {
                return a.idKick = " ";
            });
        }
        kickoff = false;
    } else if (kickoff == false) {
        if (inquireoff) {
            inquire = inquire.filter(function (a) {
                return a.idKick = "checked";
            });
        } else {
            dataClone = dataClone.filter(function (a) {
                return a.idKick = "checked";
            });
        }
        kickoff = true;
    }
    if (inquireoff) {
        render(inquire);
    } else {
        render(dataClone);
    }
});
pageSelectorBtn.addEventListener("click", function (e) {
    page = (pageSelector.children[0].innerText - 1) * 5 + 1;
    pages = pageSelector.children[0].innerText;
    if (inquireoff) {
        render(inquire);
    } else {
        render(dataClone);
    }

});
formBtn[0].addEventListener("click", formBtnInquire);
formBtn[1].addEventListener("click", formBtnReset);
formBtn[2].addEventListener("click", formBtnNew);
pagination.parentNode.addEventListener('click', paginationClick);
tbody.addEventListener("click", tBody);
